<!DOCTYPE html>
<html lang="en">
    {% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/xm-select-master/dist/xm-select.js"></script>
</head>

<body>
    <div class="udukb">
        <!--导栏-->
        <a href={% url 'index' %}><img src="{% static 'img/loog.png' %}" width="200px" height="60px"></a>
        <div class="aeuj">
            <ul>
                <li ><a href={% url 'index' %} >音乐馆</a></li>
                <li><a href={% url 'ujqi_rdtf' %}>音乐排行</a></li>
                <li><a href={% url 'wd' %} class="yoqc">我的音乐</a></li>
            </ul>
        </div>
        <div class="rtfp">
            <input type="text">
            <div><span class="layui-icon">&#xe615;</span></div>
        </div>
        <div>
            <ul class="layui-nav" lay-bar="disabled">
              <li class="layui-nav-item" lay-unselect="">
                <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
                <dl class="layui-nav-child">
                  <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
                </dl>
              </li>
            </ul>
          </div>
    </div>
    <div class="uxjy_img">
        <div class="whww_udwq">
            <img src="/media/{{current_etyn.mtkg_img}}" class="whww_img">
            <h2 style="color:white">{{current_etyn.jntq}}</h2>
        </div>
    </div>
    <div class="vjbj">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">歌曲</li>
                <li>歌单</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show layui-icon">
                    <a href="{% url 'ulpfk' %}?odkl=3&id=0" class="layui-btn"> &#xe652; 播放全部</a>
                    <table class="layui-table" lay-even="" lay-skin="nob">
                        <colgroup>
                            <col width="20">
                            <col width="200">
                            <col width="100">
                            <col width="100">
                            <col width="200">
                        </colgroup>
                        <thead>
                            <tr>
                                <th></th>
                                <th>歌曲</th>
                                <th>歌手</th>
                                <th>时长</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in nhad_skma%}
                            <tr>
                                <td>{{forloop.counter}}</td>
                                <td><a href="{% url 'sm_yung' %}?id={{i.skma_id.skma_id}}">{{ i.skma_id.skma_name }}</a></td>
                                <td>{{ i.skma_id.skrt }}</td>
                                <td>{{ i.skma_id.jfta }}</td>
                                <td>
                                    <a href="{% url 'ulpfk' %}?odkl=1&id={{i.skma_id.skma_id}}" class="asftw">&#xe652;</a>
                                    <a onclick="bcii({{i.skma_id.skma_id}})" class="asftw">&#xe640;</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr><td colspan=5>还没有收藏的音乐</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table" lay-even="" lay-skin="nob">
                        <colgroup>
                            <col width="200">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>歌单</th>
                                <th>创建时间</th>
                                <th>播放量</th>
                                <th>收藏量</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in nhad_skuj %}
                            <tr>
                                <td><a href="{% url 'uj_yung' %}?id={{i.skuj_id.skuj_id}}"><img src='/media/{{i.skuj_id.skuj_img}}' height="40px" width="40px"
                                            style="margin-right:20px;">{{ i.skuj_id.skuj_name }}</a></td>
                                <td>{{ i.skuj_id.skuj_time }}</td>
                                <td>{{ i.skuj_id.rtytjgf }}</td>
                                <td>{{ i.skuj_id.nhadjgf }}</td>
                            </tr>
                            {% empty %}
                            <tr><td colspan=4>还没有收藏的音乐</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function bcii(id){
        layer.confirm('是否取消收藏歌曲', {
                btn: ['取消','确定'] //按钮
                }, function(){
                layer.msg('操作取消', {icon: 1});
                }, function(){
                    var bid = id
                    $.ajax({
                        type:"POST",
                        url:"ujqi_nhan_bcii",
                        data:{'id':bid},
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success:function(data){
                            var a = JSON.stringify(data.url);
                            window.location.href='/wd'
                        }
                    })
            });
    }
</script>
<style>
    .layui-nav{
        background-color:#ffffff;
      }
    .layui-tab-content{
        margin-bottom:60px;
    }
    table {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .uxjy_img {
        width: 100%;
        height: 400px;
        background: url('../static/img/VCG.jpg') center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .whww_udwq {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .whww_img {
        width: 80px;
        height: 80px;
        border-radius: 80px;
        border-width: 3px;
        border-style: solid;
        border-color: white;
        margin-bottom: 10px;
    }

    .vjbj {
        width: 1080px;
        margin: 0 auto;
    }

    .layui-tab-brief>.layui-tab-title .layui-this {
        color: #1E9FFF;
    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after,
    .layui-tab-brief>.layui-tab-title .layui-this:after {
        border-bottom: 2px solid #1E9FFF;
    }

    .asftw {
        font-size: 25px;
        margin-left: 30px;
        color: #919191d5;
    }

    .asftw:hover {
        color: #5FB878;
    }
</style>
<style>
    /* 头部导航栏 */
    .udukb {
        width: 1080px;
        height: 60px;
        margin: 0 auto;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .aeuj ul {
        list-style: none;
    }

    .aeuj ul li {
        display: inline;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 18px;
    }

    .yoqc {
        color: #1E9FFF;
    }

    .rtfp input {
        height: 25px;
        border: none;
        border-top: 1px black solid;
        border-bottom: 1px black solid;
        border-left: 1px black solid;
        font-size: 16px;
    }

    .rtfp {
        display: flex;
    }

    .rtfp div {
        height: 25px;
        width: 20px;
        border-top: 1px black solid;
        border-right: 1px black solid;
        border-bottom: 1px black solid;
        line-height: 25px;
    }
</style>

</html>